﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>


    <script src="../../js组件/jquery/jquery-latest-pack.js" type="text/javascript"></script>
</head>
<body>
 <form id="form1" name="form1">
       <input type="text" name="textfield">
       <input type="submit" name="Submit" value="提交">
 </form>


<a style="background:#ffffff;">dfds</a>
<a>dfds</a>
<script type="text/javascript">

    $("a").click(function()
    {
      alert("hello word");  
    });
    


</script>

<div id="div1">
    <p>
        //$(&quot;a&quot;)得到所有的A原素</p>
    <div>
    <p>
        //$(&quot;#a&quot;)得到ID为a的原素</p>
    </div>
    <p>
        &nbsp;</p>
</div>        

 <a href="#" id="test" onClick="jq()" >得到DIV下的P原素内容</a>
    <br />
  <a href="#" id="A1" onClick="addbody()" >向body中添加一些原素</a><br />
  
   <a href="#" id="A2" onClick="copyobj()" >复制一个jQuery对象，</a>
   
   <hr />
   运行：当点击id为test的元素时，img标签的src都变成了2.jpg。

<div id="scrimg">

<img src="1.jpg" width="90" height="90"/>
<img src="1.jpg"/>
</div>

<a href="#" id="A3" onClick="chaimg()">当点击id为test的元素时，img标签的src都变成了2.jpg</a>
   <hr />

    <p>
        eq(pos) 说明：减少匹配对象到一个单独得dom元素参数：pos (Number): 期望限制的索引，从0 开始</p>
    <p>This is just a test.</p>
 <p>So is this</p>
 <a href="#" id="A4" onClick="eqpos()">jQuery</a>
 <a href="#" id="A5" onClick="alert($('p').get(4).innerHTML);">用get()得到第一个的数据</a>
 
 <hr />
 
    <p>
        index(obj) 说明：返回对象索引参数：obj (Object): 要查找的对象 
    </p>



    <p>
        <a id="A6" href="#" onclick="inde()">size(),length,index</a>
    </p>



</body>
<script type="text/javascript">
function jq()
{//得到DIV下的P原素内容<
    alert($("div>p").html());
         //运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容 
     alert("即div标签下p元素的内容"+$(document).find("div>p").html());
    try
    {
        $("<div><p>Hello</p></div>").appendTo("body");
     }
     catch(e)
     {
        alert(e);
     }
     //运行：当点击id为test的元素时，背景色变成黑色
    // $(document.body).background("#000000");
}

//向body中添加一些原素
function addbody()
{
 //   $("<div><p>Hello</p></div>").appendTo("body");
  var d =  document.createElement("div");
  d.innerHTML ="<div><p>Hello</p></div>";
  document.body.appendChild(d);
  //运行：当点击id为test的元素时，隐藏form1表单中的所有元素。
   $(form1.elements).hide(); 
  
  
}

function copyobj()
{
    var o  = $("div");//所有div
   var s = $(o).find("div>p").html();
   o.hide();
   alert(s);
}

</script>

<script type="text/javascript">
//each(fn)
//说明：将函数作用于所有匹配的对象上
function chaimg()
{
    var imgsrcobjs = $("#scrimg");
    imgsrcobjs.find("img").each(
       function()
       {
         this.src="http://www.google.com/logos/Logo_25wht.gif";
         this.style.cursor="pointer";
       }
    );
    alert('第二次改变值');
    imgsrcobjs.find("img")[1].src="http://gg.blueidea.com/2007/loginbar/99ut.gif";
}

//说明：减少匹配对象到一个单独得dom元素
//参数：pos (Number): 期望限制的索引，从0 开始

function eqpos()
{
     alert($("div").eq(1).html());

    ///这个不知道怎么用的   alert($("div").eq(1).html());
}

//index(obj)
//说明：返回对象索引
//参数：obj (Object): 要查找的对象
function inde()
{
  alert($(document).find("div>p").size());
  try
  {
    alert($("a").index(document.getElementById('A6')));
  }
  catch(e)
  {
    alert("不支持index");
  }

}
</script>
</html>
